﻿
var store2 = new Ext.data.XmlStore({
    // store configs
    autoDestroy: true,
    url: 'Measurement.ashx', // automatically configures a HttpProxy
    // reader configs
    record: 'Alert', // records will have an "Item" tag
    totalRecords: '@TotalResults',
    fields: [
    // set up the fields mapping into the xml doc
    // The first needs mapping, the others are very basic
    //{name: 'Content', mapping: 'Alert > Content' }, 
         'Content', 'Time', 'Competitor', 'CompetitorTime', 'Result'
    ]
});

function renderWinLossResult(val) {
    val = val.trim();
    if (val.toUpperCase() == 'WIN') {
        return '<span style="color:#66CC66;">' + val + '</span>';
    } else if (val.toUpperCase() == 'LOSS') {
        return '<span style="color:red;">' + val + '</span>';
    }
    return '<span style="color:blue;">' + val + '</span>';
    //return val;
}


var testObj;

Ext.onReady(function() {

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [
        // create instance immediately
                    new Ext.BoxComponent({
                        region: 'north',
                        height: 32, // give north and south regions a height
                        autoEl: {
                            tag: 'div',
                            html: '<h1>Hosted Editorial Automation Platform</h1>'
                        }
                    }), 
                            {
                            // lazily created panel (xtype:'panel' is default)
                            region: 'south',
                            contentEl: 'south',
                            split: false,
                            height: 100,
                            minSize: 100,
                            maxSize: 100,
                            collapsible: true,
                            title: 'footer',
                            margins: '0 0 0 0'
                        },
                {
                    region: 'east',
                    title: 'Measurement',
                    collapsible: true,
                    split: true,
                    width: 400, // give east and west regions a width
                    minSize: 200,
                    maxSize: 600,
                    margins: '0 5 0 0',
                    layout: 'fit', // specify layout manager for items
                    items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 1, // second tab initially active
                    tabPosition: 'bottom',
                    items: [{
                        html: '<img src="chart.PNG" /><br/><p>*Notice*: this is mockup chart</p>',
                        title: 'Chart',
                        id: 'winloss-grid',
                        autoScroll: true
                    },
                    new Ext.grid.GridPanel({
                        store: store2,
                        title: 'Timeline Grid',
                        columns: [
                        { id: 'Content', header: 'Alert', width: 100, sortable: true, dataIndex: 'Content' },
                        { header: 'Competitor', width: 40, sortable: true, dataIndex: 'Competitor' },
                        { header: 'ReutersTime', width: 120, sortable: true, dataIndex: 'Time' },
                        { header: 'CompetitorTime', width: 120, sortable: true, dataIndex: 'CompetitorTime' },
                        { id: 'Result', header: 'Result', width: 40, sortable: true, renderer: renderWinLossResult, dataIndex: 'Result' }
                        ],
                        stripeRows: true,
                        autoExpandColumn: 'Result'
                    })
                    ]
                })
                },
            {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'Menu',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [
                {
                    xtype: 'treepanel',
                    id: 'tree-panel',
                    region: 'center',
                    margins: '2 2 0 2',
                    autoScroll: true,
                    rootVisible: false,
                    root: new Ext.tree.AsyncTreeNode(),
                    title: 'Applications',
                    border: false,
                    iconCls: 'applications',
                    // Our custom TreeLoader:
                    loader: new Ext.tree.TreeLoader({
                        dataUrl: 'Automations.ashx'
                    }),

                    listeners: {
                        'render': function(tp) {
                            tp.getSelectionModel().on('selectionchange', function(tree, node) {
                                store2.baseParams = {
                                    id: node.id
                                };
                                store2.reload();
                                Ext.Ajax.request({
                                    url: "AutomationDetail.ashx",
                                    params: { id: node.id },
                                    success: function someFn(result, request) {
                                        var text = result.responseText;
                                        Ext.getCmp('book-detail').body.update(text);
                                    }
                                });
                            })
                        }
                    }
                }, {
                    title: 'Settings',
                    html: '',
                    border: false,
                    iconCls: 'settings'
                },
                    {
                        title: 'Reports',
                        contentEl: 'reports',
                        border: false,
                        iconCls: 'reports'
}]
            },
        // in this instance the TabPanel is not wrapped by another panel
        // since no title is needed, this Panel is added directly
        // as a Container
            new Ext.TabPanel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [
                    {
                        id: 'book-detail',
                        contentEl: 'book-details',
                        title: 'Details',
                        autoScroll: true
}]
            })]
    });

});